<script setup>
import { ref } from 'vue';

const isCollapse = ref(false)
const asideWidth = ref('200px')

const handleCollapse = () => {
  isCollapse.value = !isCollapse.value
  asideWidth.value = isCollapse.value ? '64px': '200px'  
}
const handleFullScreen = () => document.documentElement.requestFullscreen()
</script>

<template>
  <div>
    <el-container>
      <!-- aside -->
      <el-aside :width="asideWidth">
        <div class="logo">
          <img src="../assets/logo/logo.png" alt="" class="logo-img"><span class="sys-name">系统名称</span>
        </div>
        <!-- menu -->
        <el-menu default-active="/menu1" :collapse="isCollapse" :collapse-transition="false">
          <el-menu-item index="/menu1"><el-icon><House /></el-icon>菜单一</el-menu-item>
          <el-menu-item index="/menu2"><el-icon><House /></el-icon>菜单二</el-menu-item>
          <el-sub-menu index="1">
            <template #title><el-icon><House /></el-icon>系统管理</template>
            <el-menu-item index="/user"><el-icon><Pointer /></el-icon>用户管理</el-menu-item>
            <el-menu-item index="/stuff"><el-icon><Pointer /></el-icon>员工管理</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- header -->
        <el-header>
          <el-icon class="collapse-btn" @click="handleCollapse"><Menu/></el-icon>
            <!-- breadcrumb -->
            <el-breadcrumb separator="/" class="breadcrumb">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item><a href="/user">用户管理</a></el-breadcrumb-item>
            </el-breadcrumb>
            <!-- 右侧  -->
            <div class="header-right">
              <i class="iconfont icon-quanping quanping" @click="handleFullScreen"></i>
              <el-dropdown placement="bottom">
                  <div class="avatar">
                    <img src="../assets/logo/logo.png" class="logo-img">
                    <span class="role-name">管理员</span>
                  </div>             
                  <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>个人信息</el-dropdown-item>
                    <el-dropdown-item>修改密码</el-dropdown-item>
                    <el-dropdown-item>退出登录</el-dropdown-item>               
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
        </el-header>
        <!-- main -->
        <el-main>
          <div class="notify">早安！骚年 不吃香菜</div>
          <div class="notify">上线了一个通知</div>
          <el-card>
            <div class="clearfix"><span>这是一个CARD</span></div>
            <div>
              2024 ... 手把手带你从0到1实现一个element-admin
              <div class="card-bottom">
                <div class="bold-title"><strong>主题色</strong></div>
                <el-button type="primary">按钮</el-button>
                <el-button type="success">按钮</el-button>
                <el-button type="danger">按钮</el-button>
                <el-button type="warning">按钮</el-button>
                <el-button type="info">按钮</el-button>
              </div>
            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style scoped>
.el-aside{
  background-color: #D3DCE6;
  min-height: 100vh;
  /* box-shadow: 2px 0 6px rgba(0,21,41,55); */
}
.el-header{
  background-color: #B3C0D1;
  display: flex;
  align-items: center;
}
.el-main{
  background-color: #E9EEF3;
}
.logo{
  height: 60px;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4f4f4;
}
.el-menu{
  /* 去掉右侧边框 */
  border: none;
}
.logo-img{
  width: 40px;
  height: 40px;
}
.sys-name{
  margin-left: 5px;
  font-size: 20px;
}
.collapse-btn{
  font-size: 25px;
}
.breadcrumb{
  font-size: 22px;
  margin-left: 12px;
}
.header-right{
  flex:1;
  width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.quanping{
  font-size: 25px;
  margin-right: 20px;
}
.notify{
  box-shadow: 0 0 10px rgba(0,0,0,.1);
  padding: 10px 20px;
  border-radius: 5px;
  margin-bottom: 10px;
}
.el-card{
  width: 500px;
}
.bold-title{
 margin:10px 0; 
}
.card-bottom{
  margin-top: 20px;
}
.avatar{
  display: flex;
  align-items: center;
  cursor: pointer;
}
.role-name{
  margin-right:10px;
}
</style>